<template>
	<view>
		<view id="webPlayer" class="web">
			<view id="topHalf" class="section-top" style="height: 420rpx;">
				<view id="dispArea" class="disp-area">
					<view id="video-box" class="video-container upper">
						<view class="video-box">
							<!-- 回放视频模块 -->
							<view id="playbackPlayer"></view>
						</view>
					</view>
				</view>
				<view style="display:none;" class="waiting-layer">
					<view>直播未开始</view>
				</view>
			</view>
			<view style="width:100%;height:30px;display: flex;">
				<button id="full-screen" class="full-screen" style="width: 160rpx;" @click="fullScreen">全屏</button>
				<button class="full-screen" @click="playbackRateFoo(1)">X1</button>
				<button class="full-screen" @click="playbackRateFoo(2.5)">X2.5</button>
				<button class="full-screen" @click="playbackRateFoo(3)">X3</button>
				<button class="full-screen" @click="playbackRateFoo(4)">X4</button>
			</view>
			<view class="section-item">
				<view class="section" @click="choseSection(1)">
					<view class="section-text">文档</view>
					<view class="bar-line" :class="section_index==1?'active_color':''"></view>
				</view>
				<view class="section" @click="choseSection(2)">
					<view class="section-text">聊天</view>
					<view class="bar-line" :class="section_index==2?'active_color':''"></view>
				</view>
				<view class="section" @click="choseSection(3)">
					<view class="section-text">问答</view>
					<view class="bar-line" :class="section_index==3?'active_color':''"></view>
				</view>
			</view>
			
			<view class="box_nodoc" :class="section_index==1?'':'hidden'">
				<view id="playbackPanel" class="drawPanel"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				section_index: 1,

			}
		},
		mounted() {
			this.loadLive()
		},
		onLoad() {
			console.log(window)
		},
		methods: {
			loadLive() {
				window.$.DW.config({
					userId: '56761A7379431808',
					roomId: '18FB38B08568E1D39C33DC5901307461',
					recordId: '86CC7D98E8235A84',
					groupId: '',
					viewername: '',
					viewertoken: '',
					fastMode: true,
					forceNew: true 
				})
			},
			// 倍速播放
			playbackRateFoo(val) {
				window.$.DW.playbackRate(val)
			},
			// 全屏播放
			fullScreen() {
				window.$.DW.switchFullScreen(true)
			},
			choseSection(item) {
				this.section_index = item
			},
		}
	}
</script>

<style lang="scss" scoped>
	// @import url("./cc_css/main_mobile.css");

	
	.active_color {
		background-color: #6d9ee1 !important;
	}
	
	.hidden {
		display: none !important;
	}
	
	.full-screen {
		width: 100rpx;
		height: 60rpx;
		border-right: 1px solid #ccc;
		margin-right: 2px;
		border-radius: 0;
		line-height: 60rpx;
	}
	#playbackPlayer {
	  height: 100%;
	}
	
	video::-webkit-media-controls-fullscreen-button {
	  display: none;
	}
	
	.section-item {
		height: 80rpx;
		width: 100%;
		display: flex;
	
		.section {
			height: 70rpx;
			width: 33%;
			text-align: center;
	
			.section-text {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 30rpx;
			}
	
			.bar-line {
				height: 5rpx;
				width: 50%;
				margin: 5rpx auto 0;
			}
		}
	}
	
	
	.box_nodoc {
		width: 100%;
		height: 700rpx;
		overflow: hidden;
	}
	.drawPanel {
		margin: 50rpx auto 0;
		height: 600rpx;
		width: 90%;
	}
</style>
